<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>按规则处理Excel</title>
    <!--<script th:src="@{/js/jquery-3.3.1.min.js}" ></script>-->
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .center-in-center{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>

</head>
<body>
<div class="center-in-center">
<form id="upload" enctype="multipart/form-data" method="post" action="/excelhandle/uploadFileAction" role="form">
    <div class="form-group">
        <label for="uploadFile">文件输入</label>
    <input type="file" name="uploadFile" id="uploadFile"/>
    <input type="hidden" name="id" value="12"/>
    <!--<input type="button" value="文件上传" onclick="doUpload()"/>-->
        <br/>
    <button type="button" class="btn btn-default" onclick="doUpload()">文件上传</button>
     <button  id="downloadButton" type="button" class="btn btn-default" onclick="doDownload()" style="display: none">下载文件</button>
    </div>
</form>

<form id="download" method="post" action="/excelhandle/downloadFileAction">
    <input id="downFileAddress" type="hidden" value="" name="downFileAddress"/>
</form>
</form>
</div>
<script type="text/javascript">
    function doUpload() {
        // var upl = document.getElementById("upload");
        // upl.submit();
        if ($("#uploadFile").val().length<=0) {
            alert("请先选择Excel文件!");
            return;
        }
        var formdata = new FormData(document.getElementById("upload"));
        $.ajax({
            url: "/excelhandle/uploadFileAction",
            type: "post",
            data: formdata,
            contentType: false, //- 必须false才会自动加上正确的Content-Type
            processData: false, //- 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
            success: function (data) {
                // alert("文件上传转换成功!");
                console.log(data.excelFileAddress);
                if (data.excelFileAddress.length != 0) {
                    var button = document.getElementById("downloadButton");
                    var downFileAddress = document.getElementById("downFileAddress");
                    button.style.display = "";
                    downFileAddress.value = data.excelFileAddress;
                    alert("文件上传转换成功,请及时进行下载!");
                } else {
                    alert("文件上传转换失败!");
                }
            },
            error: function () {
                alert("fail");
            }
        });
    }

    function doDownload() {
        var download = document.getElementById("download");
        var button = document.getElementById("downloadButton");
        var downFileAddress = document.getElementById("downFileAddress");
        if (downFileAddress.value != null && downFileAddress.value.length > 0) {
            button.style.display = "none";
            download.submit();
        } else {
            alert("请确认是否成功上传了文件!");
            button.style.display = "none";
        }
        //  window.location.href = "${pageContext.request.contextPath}/user/export?stime="+stime+"&etime="+etime;
        // $.ajax({
        //     type : 'POST',
        //     url: "/downloadFileAction”, // 处理请求的url
        //     data : "downFileAddress=" +downFileAddress.value, // 提交给服务器的数据
        //     async : false,
        //     success : function(data){
        //     window.open(baseURL + data); // baseURL是工程名，例：/project1
        //         "${pageContext.request.contextPath}/user/export?stime="+stime+"&etime="+etime
        // }
        // });
    }
</script>
</body>
</html>
